import { createRouter, createWebHistory } from "vue-router";
// createRouter创建路由实例
// createWebHistory创建history模式的路由实例

import Login from "@/views/Login/Login.vue";
import Layout from "@/views/Layout/Layout.vue";
import Home from "@/views/Home/Home.vue";
import Category from "@/views/Category/Category.vue";
import SubCategory from "@/views/SubCategory/SubCategory.vue";
import Detail from "@/views/Detail/Detail.vue";
import CartList from "@/views/CartList/CartList.vue";
import CheckOut from "@/views/CheckOut/CheckOut.vue";
import Pay from "@/views/Pay/Pay.vue";
import PayBack from "@/views/Pay/PayBack.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 下-->配置path和component对应关系的位置
  routes: [
    {
      path: "/",
      name: "Layout",
      component: Layout,
      children: [
        {
          path: "/",
          name: "Home",
          component: Home,
        }, // component的两种写法其一
        {
          path: "/category/:id", //占位的id参数
          name: "Category",
          component: () => import("@/views/Category/Category.vue"),
        }, // component的两种写法其二
        {
          path: "/cart",
          name: "Cart",
        },
        {
          path: "/category/sub/:id", //占位的id参数
          name: "SubCategory",
          component: () => import("@/views/SubCategory/SubCategory.vue"),
        },
        {
          path: "/detail/:id", //占位的id参数
          name: "Detail",
          component: () => import("@/views/Detail/Detail.vue"),
        },
        {
          path: "/cartlist",
          name: "CartList",
          component: () => import("@/views/CartList/CartList.vue"),
        },
        {
          path: "/checkout",
          name: "CheckOut",
          component: () => import("@/views/CheckOut/CheckOut.vue"),
        },
        {
          path: "/pay",
          name: "Pay",
          component: () => import("@/views/Pay/Pay.vue"),
          props: (route) => ({ query: route.query }) // 确保query参数传递给组件
        },
        {
          path: "paycallback",
          name: "PayBack",
          component: () => import("@/views/Pay/PayBack.vue"),
        },
      ],
    },
    {
      path: "/login",
      name: "Login",
      component: Login,
    },
  ],
  // 路由滚动行为设置
  scrollBehavior() {
    return { top: 0 };
  },
});

export default router;
